<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            font-size: 2vw;
        }

        * {
            font-size: inherit;
            line-height: 1.7;
        }

        .flex {
            display: flex;
            flex-wrap: wrap;
        }

        .flex > * {
            border: solid 1px #ccc;
            padding: .5rem;
            line-height: 1.6;
            margin: .5rem;
        }
    </style>
</head>
<body>
<div class="flex">
    <form action="upload.let" method="post" enctype="multipart/form-data"><!--必须: method="post" enctype="multipart/form-data"-->
        文 件:<input name="img" type="file" accept="image/*" multiple><br/><!--必须:type="file" accept="image/*"类型过滤 multiple 多选-->
        名 称:<input name="fileDesc" type="text"><br/>
        <button>文件上传</button>
    </form>
    <div>
        <a href="../imgs/约海于格.jpg">约海于格.jpg</a> <a href="../imgs/约海于格.jpg" download="约海于格-文件名">约海于格.jpg</a><br/>
        <a href="down.let?file=/2022/05/10/a9c6080c-187b-4514-91bf-92a340b5f71f.png">下载1</a><br/>
        <img src="down.let?file=/2022/05/10/a9c6080c-187b-4514-91bf-92a340b5f71f.png" style="width: 20vmin">
    </div>


    <div id="upload">
        文 件:<input name="img" type="file" accept="image/*"><br/>
        名 称:<input name="fileDesc" type="text"><br/>
        <button>AJAX文件上传</button>
    </div>
    <div>预览:<br>
        <img class="_img" src="../imgs/约海于格.jpg" style="width: 20vmin"><br/>
    </div>
    <div>
        上传后的图片:<br/>
        <img class="_img" src="../imgs/约海于格.jpg" style="width: 20vmin">
    </div>
</div>
<progress hidden id="progress" value="0" max="100" style="width: 100%;"></progress>
<script>
    let root = document.querySelector("#upload");
    let inputs = root.querySelectorAll("input");
    let btn = root.querySelector("button");
    let imgs = document.querySelectorAll("._img");

    let progress = document.querySelector("progress");
    console.debug(root,inputs,btn,imgs);

    //AJAX上传
    btn.onclick = function(){
        if(inputs[0].files.length<1){
            alert("请先选择文件");
            return;
        }
        let formData = new FormData();//new FormData(form);
        formData.append("fileDesc",inputs[1].value);
        formData.append("key","关键字");
        formData.append("img",inputs[0].files[0]);

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    let data = JSON.parse(xhr.responseText);
                    console.info(data);
                    imgs[1].src="down.let?file="+data.uri;
                }else{
                    alert(`上传失败:${xhr.status}`);
                }
                progress.hidden=true;//结束上传时隐藏进度条
            }
        }
        xhr.upload.onprogress=function(event){
            console.debug(event);
            progress.value=event.loaded*100/event.total;
        }
        xhr.open("post","upload.let");
        xhr.timeout=50000;//设置超时
        xhr.send(formData);
        progress.hidden=false;//开始上传时显示出进度条

    }

    //图片预览
    inputs[0].onchange=function(){
        if(inputs[0].files.length==0){
            imgs[0].src="无图url";
            return;
        }
        imgs[0].src=window.URL.createObjectURL(inputs[0].files[0]);
    }

</script>

</body>
</html>